<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>注册</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" href="./AmazeUI-2.4.2/assets/css/amazeui.min.css"/>
    <link href="./css/dlstyle.css" rel="stylesheet" type="text/css">
    <script src="./AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="./AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>

    <!-- 导入vue和axios的核心js -->
    <script src="./plugins/vue/dist/vue.js"></script>
    <script src="./plugins/axios/dist/axios.js"></script>
    <script src="./js/axios.common.js"></script>
    <style type="text/css">
        .am-tab-panel{margin-top: -20px;}
        .validateMsg{font-size: 12px;color: #ff0000;}
        #dyMobileButton:disabled{cursor: no-drop;}
    </style>
</head>

<body>

<div id="app">
    <div class="login-boxtitle">
        <a href="home/demo.html"><img alt="" src="./images/logobig.png"/></a>
    </div>

    <div class="res-banner">
        <div class="res-main">
            <div class="login-banner-bg"><span></span><img src="./images/big.jpg"/></div>

            <div class="login-box">
                <!--
                    am-tabs：是amazeui的tabs选项卡组件
                        里面必须有一个ul和一个div
                        ul是多个选项卡的按钮，div里面是每个选项卡按钮对应的页面内容

                        class="am-active" 表示处于激活状态（被选中）
                -->
                <div class="am-tabs" id="doc-my-tabs">
                    <ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
                        <li><a href="">邮箱注册</a></li>
                        <li class="am-active"><a href="">手机号注册</a></li>
                    </ul>

                    <div class="am-tabs-bd">
                        <!-- 邮箱注册 -->
                        <div class="am-tab-panel">
                            <form method="post">
                                <div class="user-email">
                                    <label for="email"><i class="am-icon-envelope-o"></i></label>
                                    <input type="email" name="" id="email" placeholder="请输入邮箱账号">
                                </div>
                                <div class="user-pass">
                                    <label for="password_email"><i class="am-icon-lock"></i></label>
                                    <input type="password" name="" id="password_email" placeholder="设置密码">
                                </div>
                                <div class="user-pass">
                                    <label for="passwordRepeat_email"><i class="am-icon-lock"></i></label>
                                    <input type="password" name="" id="passwordRepeat_email" placeholder="确认密码">
                                </div>
                            </form>

                            <div class="login-links">
                                <label for="reader-me_email">
                                    <input id="reader-me_email" type="checkbox"> 点击表示您同意商城《服务协议》
                                </label>
                            </div>
                            <div class="am-cf">
                                <input type="submit" name="" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl">
                            </div>

                        </div>

                        <!-- 短信验证码注册 -->
                        <div class="am-tab-panel am-active">
                            <form method="post" :model="phoneRegForm">
                                <div class="user-phone" id="phoneDiv">
                                    <label for="phone"><i class="am-icon-mobile-phone am-icon-md"></i></label>
                                    <input type="tel" v-model="phoneRegForm.phone" @blur="validatePhone" id="phone" placeholder="请输入手机号">
                                    <span class="validateMsg">{{phoneValidateMsg}}</span>
                                </div>
                                <div class="verification" id="verifyCodeDiv">
                                    <label for="code"><i class="am-icon-code-fork"></i></label>
                                    <input type="tel" v-model="phoneRegForm.verifyCode" @blur="validateVerifyCode" id="code" placeholder="请输入验证码">
                                    <button type="button" class="btn" @click="sendMobileCode();" :disabled="btnDisabled" id="dyMobileButton">
                                        {{btnText}}
                                    </button>
                                    <br/>
                                    <span class="validateMsg">{{verifyCodeValidateMsg}}</span>
                                </div>
                                <div class="user-pass">
                                    <label for="password_phone"><i class="am-icon-lock"></i></label>
                                    <input type="password" v-model="phoneRegForm.password" id="password_phone" placeholder="设置密码">
                                    <span class="validateMsg">{{passwordValidateMsg}}</span>
                                </div>
                                <div class="user-pass">
                                    <label for="passwordRepeat_phone"><i class="am-icon-lock"></i></label>
                                    <input type="password" v-model="phoneRegForm.confirmPassword" id="passwordRepeat_phone" placeholder="确认密码">
                                    <span class="validateMsg">{{confirmPasswordValidateMsg}}</span>
                                </div>
                            </form>
                            <div class="login-links">
                                <label for="reader-me_phone">
                                    <input id="reader-me_phone" @click="phoneRegForm.agreement = !phoneRegForm.agreement" type="checkbox"> 点击表示您同意商城《服务协议》
                                </label>
                                <br/>
                                <span class="validateMsg">{{agreementValidateMsg}}</span>
                            </div>
                            <div class="am-cf">
                                <input type="submit" @click="submitRegForm" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer ">
        <div class="footer-hd ">
            <p>
                <a href="# ">恒望科技</a>
                <b>|</b>
                <a href="# ">商城首页</a>
                <b>|</b>
                <a href="# ">支付宝</a>
                <b>|</b>
                <a href="# ">物流</a>
            </p>
        </div>
        <div class="footer-bd ">
            <p>
                <a href="# ">关于恒望</a>
                <a href="# ">合作伙伴</a>
                <a href="# ">联系我们</a>
                <a href="# ">网站地图</a>
                <em>© 2015-2025 Hengwang.com 版权所有.</em>
            </p>
        </div>
    </div>
</div>
<script type="text/javascript">
    //jQuery的入口函数：页面加载完毕后执行
    $(function () {
        $('#doc-my-tabs').tabs();   //启用选项卡组件的功能效果
    })

    new Vue({
        el:"#app",
        data:{
            phoneRegForm:{
                phone:'',
                verifyCode:'',
                password:'',
                confirmPassword:'',
                agreement: false,
            },
            phoneRegexp: /^1[3-9][0-9]{9}$/,    //手机号验证的正则表达式
            phoneValidateResult: false,         //手机号验证结果
            phoneValidateMsg: '',               //手机号验证提示信息
            verifyCodeValidateMsg: '',               //验证码验证提示信息
            passwordValidateMsg: '',               //密码验证提示信息
            confirmPasswordValidateMsg: '',               //确认密码验证提示信息
            agreementValidateMsg: '',               //勾选同意协议验证提示信息
            btnText:'获取',           //获取按钮上面的文字
            btnDisabled: false,       //是否禁用获取按钮
        },
        methods:{
            //验证手机号
            validatePhone(){
                if(this.phoneRegexp.test(this.phoneRegForm.phone)){
                    this.phoneValidateMsg = ''
                    $("#phoneDiv").css("color","#00b400");
                    //发送请求到后端，验证手机号唯一  1表示手机验证码注册 2表示验证码登录
                    this.$http.get("/lrc/validatePhone/1/"+this.phoneRegForm.phone).then(res => {
                        this.phoneValidateResult = res.data.success
                        if(!this.phoneValidateResult){
                            $("#phoneDiv").css("color","#ff0000");
                            this.phoneValidateMsg = res.data.msg  //错误提示消息
                        }
                    })
                }else{
                    $("#phoneDiv").css("color","#ff0000");
                    this.phoneValidateMsg = '请输入正确的手机号！'
                }
                return this.phoneValidateResult;
            },
            //验证验证码
            validateVerifyCode(){
                if(this.phoneRegForm.verifyCode){
                    $("#verifyCodeDiv").css("color","#00b400");
                    this.verifyCodeValidateMsg = ''
                    return true;
                }else{
                    $("#verifyCodeDiv").css("color","#ff0000");
                    this.verifyCodeValidateMsg = '请输入验证码！'
                    return false;
                }
            },
            //验证密码
            validatePassword(){
                return true
            },
            //验证确认密码
            validateConfirmPassword(){
                return true
            },
            //验证勾选同意服务协议
            validateAgreement(){
                return true
            },
            //点击获取按钮
            sendMobileCode(){
                let time = 5
                this.btnText = time
                this.btnDisabled = true  //禁用按钮
                //1.开始倒计时
                let intervalId = setInterval(()=>{
                    this.btnText = --time
                    if(time <= 0){
                        this.btnDisabled = false
                        this.btnText = '获取'
                        clearInterval(intervalId)
                    }
                }, 1000)
                //2.发送请求，后端发送手机短信
                this.$http.get("/lrc/sendMobileCode/"+this.phoneRegForm.phone).then(res => {
                    if(res.data.success){
                        alert("短信验证码已发送，请查收！");
                    }else{
                        alert(res.data.msg);
                    }
                })
            },
            //提交表单
            submitRegForm(){
                //提交表单之前，在前端先对整个表单内所有输入框进行验证：采用通路与 &
                if(this.validatePhone() & this.validateVerifyCode() & this.validatePassword()
                    & this.validateConfirmPassword() & this.validateAgreement()){
                    //发送请求
                    this.$http.post("/lrc/phoneReg", this.phoneRegForm).then(res => {
                        if(res.data.success){
                            //本地存储当前用户对象信息

                            //直接跳转到首页
                            location.href = "/index.html";
                        }else{
                            alert(res.data.msg);
                        }
                    })
                }
            }
        },
        mounted(){

        }
    })
</script>
</body>

</html>